<template>
  <div>
    <Button type="primary" @click="getMethod">获取列表</Button>
    <Table :columns="columns" :data="data" stripe border size="small"></Table>

    <CheckboxGroup v-model="AA" @on-change="boxChange">
      <Checkbox v-for="item in data" :value="item.function_id" :key="item.function_id" :label="item.function_id" border>
        {{ item.function_name }}
      </Checkbox>
    </CheckboxGroup>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "index.vue",
  data() {
    return {
      AA: [],
      columns: [
        {
          type: 'selection',
          width: 60
        },
        {key: 'id', title: 'id'},
        {
          key: 'function_id',
          title: '功能名称id'
        },
        {
          key: 'function_name',
          title: '功能名称'
        },
        {
          key: 'choose_status',
          title: '是否已选',
          render: (h, params) => {
            return h('span', params.row.choose_status === 1 ? '已选' : '未选')
          }
        },
        {
          key: 'remark',
          title: '备注'
        }
      ],
      data: []
    }
  },
  methods: {
    getMethod: function () {
      axios.post('/user/login', {
        name: "admin",
        password: "96e79218965eb72c92a549dd5a330112"
      }).then(function (response) {
        console.log('login success', response);
      }).catch(function (error) {
        console.log('request login is error, error info is  -->', error);
      })

      this.data = []
      // 上面的请求也可以这样做
      axios.get('/function/list', {}).then((response) => {
        let responseData = response.data;
        console.log(responseData);
        if (0 === responseData.code) {
          console.log(this)
          console.log('response code = 0', responseData.data);
          this.data = responseData.data || [];
          let ele;
          for (ele in this.data) {
            if (ele.choose_status === 1) {
              this.AA.push(ele.function_id)
            }
          }
        }

      }).catch(function (error) {
        console.log(error);
      });
    },
    boxChange: function (data) {
      console.log('execute boxChange method------', data)
      let originalData = this.data;
      let index = 0, size = originalData.length;
      let checkedStr = data.toString();
      console.log('checkedStr==', checkedStr)
      for (index, size; index < size; index++) {
        let innerEle = originalData[index];
        if (checkedStr.indexOf(innerEle.function_id) === -1) {
          innerEle.choose_status = 0
        }else {
          innerEle.choose_status = 1
        }
      }
      console.log('this.data================', this.data)
    }
  },
  mounted() {


  }
}


</script>

<style scoped>

</style>
